<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 1.引入 elemntui样式 我这里引用的是远程的，需要联网-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>

<body>
<!-- 用id=app 指明vue作用域-->
<div id="app">

    <div>
        <el-divider></el-divider>
        <el-checkbox label="6.分页查询:每次点击生效时,就消息提示当前页码"></el-checkbox>
        <el-pagination background layout="prev, pager, next" :total="1000" @current-change="handleCurrentChange"
                       :current-page.sync="currentPage">
        </el-pagination>
        <el-divider></el-divider>

        <el-col :span="5">
            <el-date-picker size="mini" type="date" placeholder="选择日期" v-model="temp" style="width: 100%;"></el-date-picker>
        </el-col>
    </div>

</div>
<!-- 2.引入 vue.js -->
<script src="js/vue.js"></script>
<!-- 3.引入 axios 异步请求工具 -->
<script src="js/axios.js"></script>
<!-- 4.引入 elemntui相关的js,处理响应特效的 我这里引用的是远程的，需要联网 -->
<script src="https://unpkg.com/element-ui@2.15.1/lib/index.js"></script>

<script>
    //固定语法，new Vue({}) 在大括号里面写代码
    new Vue({
        //5.指明vue作用域  <div id="app"></div>
        el: '#app',
        //6.数据区
        data() {
            return {
                tempNumber: '',
                temp:'',
                imgFlag: false,
                user: {
                    name: '',
                    psw: ''
                },
                currentPage: 1,
                tableData: ''


            }
        },

        //8.所有的方法都会在这里
        methods: {

            handleCurrentChange() {
                this.$message({
                    type: 'success',
                    message: '当前页为' + this.currentPage
                });
            },
        }

    })
</script>
</body>
</html>